<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <style>
        body {
            margin: 0
        }

        .h10 {
            width: 100%;
            height: 0.5rem;
            display: -webkit-box;
            clear: both;
            background: #f5f5f5
        }

        .clearfix::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        #pro1-swiper .swiper-slide {
            height: 10rem;
        }

        .aui-col-xs-3 img {
            width: 50%;
            display: block;
            margin: auto;
        }

        .dhq {
            background: #fff;
            padding: 1rem 0.75rem;
        }

        .dhq_tit h3 {
            font-size: 1.2rem;
            color: #333;
        }

        .dhq_tit h5 {
            font-size: 0.6rem;
            color: #999;
        }

        .dhq_tit h4 {
            font-size: 0.8rem;
            color: #666;
            margin-top: 0.5rem;
        }

        .dhq_img {
            margin: 1rem 0;
            padding: 0 10%;
        }

        .dhq_img img {
            width: 100%;
        }

        .dhq_text h4 {
            font-size: 0.65rem;
        }

        .dhq_text h5 {
            font-size: 0.7rem;
            line-height: 1.6rem;
            color: #f23030;
        }

        .near_price {
            font-size: 1rem;
            color: #f23030;
        }
        .near_price a{
          font-size: 0.6rem;
          color: #f23030;
          margin-top: 0.35rem;
        }
        .near_price i {
            font-size: 0.6rem;
            line-height: 0.6rem;
            height: 0.6rem;
            color: #666;
            font-style: normal;
            margin-left: 0.1rem;
            margin-top: 0.55rem;
        }
        .aui-info-item .near_sales{
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.6rem;
          color: #ff9932;
            width: 3.8rem;
            height: 0.95rem;
            line-height: 0.95rem;
            text-align: center;
            border: 1px solid #ff9932;
            border-radius: 0.9rem;
            margin-left: 0.9rem;
            letter-spacing: 1px;
        }

        .aui-list .aui-list-item-text.near_jj {
            height: 1rem;
            line-height: 1rem;
            overflow: hidden;
        }

        .aui-list .aui-list-item-text.near_pj {
            overflow: hidden;
            -webkit-box-pack: initial;
            -webkit-justify-content: initial;
            justify-content: initial;
            margin-bottom: 0.4rem;
        }

        .aui-list .aui-list-item-text.near_pj img {
            width: 0.6rem;
            margin-right: 0.2rem;
            display: inline-block;
        }

        .near .near_title {
            position: relative;
            padding: 0.5rem 0.75rem;
            width: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-flex: 1;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            background: #fff;
        }

        .near .near_title_r {
            margin-right: 1rem;
            font-size: 0.6rem;
            color: #ff8000;
            padding: 0 0.3rem;
            border: 1px solid #ff8000;
            border-radius: 1.05rem;
            line-height: 1.1rem;
        }

        .near .near_title_r::before {
            -webkit-transform: rotateZ(315deg);
            transform: rotateZ(315deg);
            margin-top: -0.3rem;
            content: '';
            width: 0.4rem;
            height: 0.4rem;
            position: absolute;
            top: 50%;
            right: 0.75rem;
            background: transparent;
            border: 1px solid #ff8000;
            border-top: none;
            border-right: none;
            z-index: 2;
            -webkit-border-radius: 0;
            border-radius: 0;
            transition: all 0.4s ease;
            -webkit-transition: all 0.4s ease;
        }

        .near .near_title span {
            font-size: 0.7rem;
            color: #666;
            margin-right: 0.5rem;
        }

        .near .near_title span.active {
            font-weight: bold;
            font-size: 0.8rem;
            color: #f23030;
            padding: 0 0.4rem;
            border: 1px solid #f23030;
            border-radius: 1.05rem;
            line-height: 1.45rem;
        }

        .aui-col-xs-3:nth-child(4n + 1) {
            clear: both;
        }

        .near_sort_list {
            width: 100%;
            background: #fff;
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s ease;
            -webkit-transition: all 0.4s ease;
            position: absolute;
            ;
            z-index: 9;
        }

        .near_sort_list li {
            border-bottom: 1px solid #e8e8e8;
            padding: 0.5rem 0.75rem;
            font-size: 0.6rem;
        }

        .near.sort .near_sort_list {
            max-height: 500px;
        }

        .near.sort .near_title_r::before {
            -webkit-transform: rotateZ(135deg);
            transform: rotateZ(135deg);
        }


        .padding_one{
          padding: 0.5rem 0 0.25rem 0!important;
          /*background: red;*/
        }
        .padding_two{
          padding: 0.25rem 0 0.5rem 0!important;
        }
        .aui-grid-label{
          line-height: 1;
        }
        .aui-list{
          padding-left: 0.75rem;
        }
        .aui-list .aui-list-item{
          padding-left: 0;
          border-bottom: 1px solid #e6e6e6;
        }
        .aui-list .aui-list-item-title{
          margin-bottom: 0.4rem;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="aui-refresh-content">
            <div id="pro1-swiper" class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in banner" @click="openProDetail('', item.goodsId)" :style="'background:url('+item.pic+') no-repeat center; background-size:cover'"></div>
                </div>
            </div>
            <section class="aui-grid">
                <div class="aui-row">
                    <div class="aui-col-xs-3" v-for="(item,index) in scatelist" @click="openDetail(item.classname, item.scate_id)" :class="[index<4 ? 'padding_one':'padding_two']">
                        <img :src="item.pic" alt="">
                        <div class="aui-grid-label">{{item.classname}}</div>
                    </div>
                    <!-- <div class="aui-col-xs-3 padding_one" @click="openDetail(item.classname, item.scate_id)">
                        <img src="../../image/two/two_mzq_18.png" alt="">
                        <div class="aui-grid-label">全部</div>
                    </div>
                    <div class="aui-col-xs-3 padding_one" @click="openDetail(item.classname, item.scate_id)">
                        <img src="../../image/two/two_mzq_18.png" alt="">
                        <div class="aui-grid-label">全部</div>
                    </div>
                    <div class="aui-col-xs-3 padding_one" @click="openDetail(item.classname, item.scate_id)">
                        <img src="../../image/two/two_mzq_18.png" alt="">
                        <div class="aui-grid-label">全部</div>
                    </div>
                    <div class="aui-col-xs-3 padding_one" @click="openDetail(item.classname, item.scate_id)">
                        <img src="../../image/two/two_mzq_18.png" alt="">
                        <div class="aui-grid-label">全部</div>
                    </div>
                    <div class="aui-col-xs-3 padding_two" @click="openDetail(item.classname, item.scate_id)">
                        <img src="../../image/two/two_mzq_18.png" alt="">
                        <div class="aui-grid-label">全部</div>
                    </div>
                    <div class="aui-col-xs-3 padding_two" @click="openDetail(item.classname, item.scate_id)">
                        <img src="../../image/two/two_mzq_18.png" alt="">
                        <div class="aui-grid-label">全部</div>
                    </div>
                    <div class="aui-col-xs-3 padding_two" @click="openDetail(item.classname, item.scate_id)">
                        <img src="../../image/two/two_mzq_18.png" alt="">
                        <div class="aui-grid-label">全部</div>
                    </div> -->
                    <div class="aui-col-xs-3 padding_two" @click="openDetail3('全部', '')">
                        <img src="../../image/two/two_mzq_18.png" alt="">
                        <div class="aui-grid-label">全部</div>
                    </div>
                </div>
            </section>
            <div class="h10" v-if="exchange_goods.length > 0"></div>
            <div class="dhq" v-if="exchange_goods.length > 0 && $api.getStorage('token') && $api.getStorage('token') != '' && $api.getStorage('token') != null && $api.getStorage('token') != 'undefined'">
                <div class="dhq_tit clearfix">
                    <div class="fl">
                        <h3>兑换区</h3>
                        <h5>兑换币专享 好货换不停</h5>
                    </div>
                    <div class="fr" onclick="openDetail2('product_list', '兑换区')">
                        <h4>查看更多</h4>
                    </div>
                </div>
                <div class="swiper-container dhq_box">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" @click="openConDetail(item.good_name, item.goods_id)" v-for="item in exchange_goods">
                            <div class="dhq_img" :style="'background:url('+item.logo_pic+') no-repeat center; background-size:cover;height: 5rem'">
                                <!-- <img src="../../image/two/cp1.jpg" alt=""> -->
                            </div>
                            <div class="dhq_text">
                                <h4>{{item.goods_title}}</h4>
                                <h5>{{item.price}}兑换币</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="h10"></div>
            <div class="near">
                <div class="near_title">
                    <div class="near_title_l">
                        <span class="active" @click="cid = 1">附近服务</span>
                        <span @click="cid = 2">附近店铺</span>
                    </div>
                    <div class="near_title_r">
                        综合排序
                    </div>
                </div>
                <div class="near_sort_list">
                    <ul>
                        <li @click="sort = 1">综合排序</li>
                        <li @click="sort = 2">销量高</li>
                        <li @click="sort = 4">价格低到高</li>
                        <li @click="sort = 5">价格高到底</li>
                        <li @click="sort = 6">距离近到远</li>
                        <li @click="sort = 7">距离远到近</li>
                    </ul>
                </div>
                <div class="near_list">
                    <div class="aui-content" v-if="cid == 1">
                        <ul class="aui-list aui-media-list" v-if="goodsList.length > 0">
                            <li class="aui-list-item" v-for="item in goodsList" @click="openProDetail(item.goods_name, item.goods_id)">
                                <div class="aui-media-list-item-inner">
                                    <div class="aui-list-item-media">
                                        <div :style="'background: url('+item.logo_pic+') no-repeat center/cover;height: 4rem;width:100%'"></div>
                                    </div>
                                    <div class="aui-list-item-inner">
                                        <div class="aui-list-item-text">
                                            <div class="aui-list-item-title">{{item.goods_name}}</div>
                                            <div class="aui-list-item-right">{{item.distance}}</div>
                                        </div>
                                        <div class="aui-list-item-text near_jj">
                                            {{item.goods_title}}
                                        </div>
                                        <div class="aui-info aui-margin-t-5" style="padding:0">
                                            <div class="aui-info-item">
                                              <span class="near_price"><a>￥</a>{{item.price}}</span>
                                              <span class="near_sales">月销{{item.sales}}笔</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="aui-content" v-else-if="cid == 2">
                        <ul class="aui-list aui-media-list" v-if="goodsList.length > 0">
                            <li class="aui-list-item" v-for="item in goodsList" @click="openShop(item.name, item.store_id)">
                                <div class="aui-media-list-item-inner">
                                    <div class="aui-list-item-media">
                                        <div :style="'background: url('+item.logo+') no-repeat center/cover;height: 4rem;width:100%'"></div>
                                    </div>
                                    <div class="aui-list-item-inner">
                                        <div class="aui-list-item-text">
                                            <div class="aui-list-item-title">{{item.name}}</div>
                                            <div class="aui-list-item-right">{{item.distance}}</div>
                                        </div>
                                        <div class="aui-list-item-text near_pj" v-if="(item.fraction - 0) >= 0">
                                            <img src="../../image/two/star-on.png" alt="" v-for="n in (item.fraction - 0)">
                                            <img src="../../image/two/star-off.png" alt="" v-for="n in (5 - (item.fraction - 0))">{{item.fraction}}
                                        </div>
                                        <div class="aui-info aui-margin-t-5" style="padding:0">
                                            <div class="aui-info-item">
                                                <span class="near_price"><a>￥</a>{{item.price}} <i>起</i></span>
                                                <span class="near_sales">月销{{item.sales}}笔</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>

<script type="text/javascript">
    var bannerSwiper = new Swiper('#pro1-swiper', {
        autoplay: 3000,
        loop: true
    })
    var dhqSwiper = new Swiper('.dhq_box', {
        autoplay: 3000,
        slidesPerView: 2.6,
        spaceBetween: 20
    })

    function openDetail2(type, name) {
        // all_open_login(function () {
        api.openWin({
                name: type,
                url: './two_frame_header2.html',
                pageParam: {
                    type: type,
                    name: name
                }
            })
            // })
    }

    apiready = function() {
        $('body').on('click', '.near_title_l span', function() {
            $(this).addClass('active').siblings().removeClass('active');
            // alert($(this).index());
            if($(this).index()==0){
              // app.cid = 1;
            }else{
              // app.cid = 2;
            }
        })

        $('body').on('click', '.near_title_r,.near_sort_list li', function() {
            $('.near').toggleClass('sort')
            $('.near_title_r').text($(this).text())
        })



        var app = new Vue({
            el: '#app',
            data: {
                banner: [], //banner列表
                scatelist: [],
                exchange_goods: [], //兑换商品列表
                page: 1,
                totalpage: 1,
                goodsList: [],
                sort: 1,
                url: window.Url.Freelocal_nearby_goods,
                cid: 1
            },
            created: function() {
                var $_this = this;
                api.showProgress({
                    title: '努力加载中...',
                    text: '先喝杯茶...',
                    modal: false
                });
                api.ajax({
                    url: window.Url.Freelocal_index,
                    method: 'post',
                    data: {
                        values: {
                            type: 1,
                            province: api.pageParam.province,
                            city: api.pageParam.city
                        }
                    }
                }, function(ret, err) {
                    if (ret) {

                        console.log(JSON.stringify(ret));
                        $_this.banner = ret.data.banner
                        $_this.scatelist = ret.data.scatelist
                        $_this.exchange_goods = ret.data.exchange_goods
                        $_this.$nextTick(function() {
                            var bannerSwiper = new Swiper('#pro1-swiper', {
                                autoplay: 3000,
                                loop: true
                            })
                            var swiper = new Swiper('.dhq_box', {
                                slidesPerView: 2.5,
                                spaceBetween: 10,
                                freeMode: true
                            })


                        })
                    } else {
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    }
                })
                api.ajax({
                    url: window.Url.Freelocal_nearby_goods,
                    method: 'post',
                    data: {
                        values: {
                            type: 1,
                            page: $_this.page,
                            province: api.pageParam.province,
                            city: api.pageParam.city,
                            longitude: api.pageParam.longitude,
                            latitude: api.pageParam.latitude,
                            sort: $_this.sort
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        console.log(JSON.stringify(ret.data))
                        if (ret.re == 1) {
                            $_this.goodsList = ret.data.list
                            $_this.totalpage = ret.data.sum_page
                        } else {
                            $_this.goodsList = []
                            $_this.totalpage = 1
                        }

                    } else {
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    }
                })
                var scroll = new auiScroll({
                    listen: true, //是否监听滚动高度，开启后将实时返回滚动高度
                    distance: 40 //判断到达底部的距离，isToBottom为true
                }, function(ret) {
                    if (ret.isToBottom) {
                        $_this.page++
                            if ($_this.page > $_this.totalpage) {
                                $_this.page = $_this.totalpage
                                return
                            }
                        api.ajax({
                            url: $_this.url,
                            timeout: 300,
                            method: 'post',
                            data: {
                                values: {
                                    type: 1,
                                    page: $_this.page,
                                    province: api.pageParam.province,
                                    city: api.pageParam.city,
                                    longitude: api.pageParam.longitude,
                                    latitude: api.pageParam.latitude,
                                    sort: $_this.sort
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                $_this.goodsList = $_this.goodsList.concat(ret.data.list)

                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                    }

                })
            },
            watch: {
                cid: function() {
                    var $_this = this
                    if ($_this.cid == 1) {
                        $_this.url = window.Url.Freelocal_nearby_goods
                    } else if ($_this.cid == 2) {
                        $_this.url = window.Url.Freelocal_getList
                    }
                },
                url: function() {
                    var $_this = this
                    $_this.page = 1
                    $_this.sort = 1
                    api.ajax({
                        url: $_this.url,
                        method: 'post',
                        data: {
                            values: {
                                type: 1,
                                page: $_this.page,
                                province: api.pageParam.province,
                                city: api.pageParam.city,
                                longitude: api.pageParam.longitude,
                                latitude: api.pageParam.latitude,
                                sort: $_this.sort
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.re == 1) {
                                $_this.goodsList = ret.data.list
                                $_this.totalpage = ret.data.sum_page
                            } else {
                                $_this.goodsList = []
                                $_this.totalpage = 1
                            }

                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                },
                sort: function() {
                    var $_this = this
                    $_this.page = 1
                    console.log($_this.url + '/' + $_this.page + '/' + api.pageParam.province + '/' + api.pageParam.city + '/' + api.pageParam.longitude + '/' + api.pageParam.latitude + '/' + $_this.sort)
                    api.ajax({
                        url: $_this.url,
                        method: 'post',
                        data: {
                            values: {
                                type: 1,
                                page: $_this.page,
                                province: api.pageParam.province,
                                city: api.pageParam.city,
                                longitude: api.pageParam.longitude,
                                latitude: api.pageParam.latitude,
                                sort: $_this.sort
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.re == 1) {
                                $_this.goodsList = ret.data.list
                                $_this.totalpage = ret.data.sum_page
                            } else {
                                $_this.goodsList = []
                                $_this.totalpage = 1
                            }

                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                }
            },
            methods: {

                openProDetail: function(name, id) {
                    // all_open_login(function () {
                    api.openWin({
                            name: 'commodity',
                            url: '../one_frame/commodity.html',
                            pageParam: {
                                name: name,
                                id: id
                            }
                        })
                        // })

                },
                openConDetail: function(name, id) {
                    // all_open_login(function () {
                    api.openWin({
                            name: 'commodity_convert',
                            url: '../one_frame/commodity_convert.html',
                            pageParam: {
                                name: name,
                                id: id
                            }
                        })
                        // })

                },
                openDetail: function(name, id) {
                    api.openWin({
                            name: 'shop_list_detail',
                            url: './two_frame_header.html',
                            pageParam: {
                                name: name,
                                id: id,
                                type: 'shop_list_detail',
                                province: api.pageParam.province,
                                city: api.pageParam.city,
                            }
                        })
                },
                openDetail3: function(name, id) {
                    api.openWin({
                            name: 'shop_list_detail2',
                            url: './two_frame_header3.html',
                            pageParam: {
                                name: name,
                                id: id,
                                type: 'shop_list_detail2',
                                province: api.pageParam.province,
                                city: api.pageParam.city,
                            }
                        })
                },
                openShop: function(name, id) {
                    // all_open_login(function () {
                    api.openWin({
                            name: 'shop_inner',
                            url: './two_frame_header.html',
                            pageParam: {
                                type: 'shop_inner',
                                name: name,
                                id: id
                            }
                        })
                        // })

                }
            },
            mounted: function() {
                var $_this = this
                api.hideProgress()
                var pullRefresh = new auiPullToRefresh({
                    container: document.querySelector('.aui-refresh-content'),
                    triggerDistance: 100
                }, function(ret) {
                    if (ret.status == "success") {
                        api.ajax({
                            url: window.Url.Freelocal_index,
                            method: 'post',
                            data: {
                                values: {
                                    type: 1,
                                    province: api.pageParam.province,
                                    city: api.pageParam.city
                                }
                            }
                        }, function(ret, err) {
                          // alert($_this.cid)
                            if (ret) {
                              // $_this.cid = 1;
                              if(ret.re==1){
                                $_this.banner = ret.data.banner
                                $_this.scatelist = ret.data.scatelist
                                $_this.exchange_goods = ret.data.exchange_goods
                                $_this.$nextTick(function() {
                                    var bannerSwiper = new Swiper('#pro1-swiper', {
                                        autoplay: 3000,
                                        loop: true
                                    })
                                    var swiper = new Swiper('.dhq_box', {
                                        slidesPerView: 2.5,
                                        spaceBetween: 10,
                                        freeMode: true
                                    })
                                })
                              }

                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                        api.ajax({
                            url: window.Url.Freelocal_nearby_goods,
                            method: 'post',
                            data: {
                                values: {
                                    type: 1,
                                    page: $_this.page,
                                    province: api.pageParam.province,
                                    city: api.pageParam.city,
                                    longitude: api.pageParam.longitude,
                                    latitude: api.pageParam.latitude,
                                    sort: $_this.sort
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                if (ret.re == 1) {
                                    $_this.goodsList = ret.data.list
                                    $_this.totalpage = ret.data.sum_page
                                } else {
                                    $_this.goodsList = []
                                    $_this.totalpage = 1
                                }
                                setTimeout(function() {
                                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                                }, 500)
                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })

                    }
                })
            }
        })
    }
</script>

</html>
